<template>
  <div class="home_child_container">
    <a-card class="settings_card">
      <a-tabs v-model:activeKey="activeTab" tab-position="left" @change="handleChange">
        <a-tab-pane key="data" tab="数据中心">
          <data-center/>
        </a-tab-pane>
        <a-tab-pane key="manage" tab="内容管理">
          <content-manage/>
        </a-tab-pane>
        <a-tab-pane key="info" tab="个人资料">
          <personal-information/>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import DataCenter from '@/views/user/setting/DataCenter'
import ContentManage from '@/views/user/setting/ContentManage'
import PersonalInformation from '@/views/user/setting/PersonalInformation'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  setup () {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      activeTab: ''
    })

    const methods = reactive({
      handleChange: (key) => {
        router.push(`/settings?tab=${key}`)
      }
    })

    onMounted(async () => {
      if (route.query.tab) {
        state.activeTab = route.query.tab
      } else {
        state.activeTab = 'data'
      }
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    DataCenter,
    ContentManage,
    PersonalInformation
  }
})
</script>

<style lang="less" scoped>
.settings_card {
  width: 100%;
  background-color: #ffffff;
}
</style>
